<template>
  <div class="app-container">

   <div class="filter-container">

      <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions" @change='changeData(value2)'>
    </el-date-picker>

    <el-select v-model="selectRoles"  clearable placeholder="请选择门店或总部" class='inp_search' @change='changeRole(selectRoles)' >
          <el-option
          v-for="item in optionsRoles"
          :key="item.value"
          :label="item.userName"
          :value="item.phone">
          </el-option>
      </el-select>
      
      <el-select v-model="selectSort"  placeholder="请选择排序方式" class='inp_search' >
          <el-option
          v-for="item in optionSort"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>
      
      <el-button  class="filter-item" type="primary" icon="el-icon-search"  @click="searchList">
        搜索
      </el-button>
      <el-button  class="filter-item" type="primary" icon="el-icon-refresh"  @click="resList">
        重置
      </el-button>
    </div>
     
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="用户名"  min-width="150" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.userName === null">--</span>
            <span v-else> {{scope.row.userName}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center"  label="用户手机号"  min-width="150" >
        <template slot-scope="scope">
            <span v-if="scope.row.userPhone === null">--</span>
            <span v-else> {{scope.row.userPhone}}</span>
        </template>
      </el-table-column>

      <el-table-column label="应付消费金额"  min-width="150" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.needCost === null">--</span>
            <span v-else> {{scope.row.needCost}}￥</span>
        </template>
      </el-table-column>

      <el-table-column label="实际消费金额" min-width="150" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.realCost === null">--</span>
            <span v-else> {{scope.row.realCost}}￥</span>
        </template>
      </el-table-column>

      <el-table-column label="总消费金额" min-width="150" align="center">
        <template slot-scope="scope">
            <span v-if="scope.row.totalOrder === null">--</span>
            <span v-else> {{scope.row.totalOrder}}￥</span>
        </template>
      </el-table-column>

      <el-table-column v-if='show' align="center" label="用户ID" width="220" >
        <template slot-scope="scope">
            <span v-if="scope.row.userId === null">--</span>
            <span v-else> {{scope.row.userId}}</span>
        </template>
      </el-table-column>

    </el-table>
   <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"  @pagination="fetchData"/>
    
  </div>
   
   
  
</template>

<script>
import { getOrderSort } from '@/api/sorts'
import { getRoles } from '@/api/userManage'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },
  data() {
    return {
      list: null,
      listLoading: true,
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
       }, 
      show:false,
      value2: '',
      total: 100,
      listLoading: true,
      listQuery:{
          page: 1,
          limit: 10,
      },
      selectRoles:'',
      optionsRoles:[],
      optionSort:[{
          value: 1,
          label: '升序'
        }, {
          value: 0,
          label: '降序'
        }],
      selectSort:'',
      NEWDATASTAR:'',
      NEWDATAEND:''
    }
  },
  created() {
    this.selectSort = this.optionSort[0].lable;
    this.selectSort = 1;
    this.getRole()
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const beginData = '';
      const endData = '';
      const paramsData = {
        curPage:this.listQuery.page,
        pageSize:this.listQuery.limit,
        isDESC:this.selectSort,
        startDate:this.NEWDATASTAR,
        endDate:this.NEWDATAEND,
        phone:this.selectRoles
        }
      getOrderSort(paramsData).then(res => {
        //this.total = res.data.countNum;
        this.list =  res.data.obj;
        this.listLoading = false
      })
    },
    getRole(){//获取门店
      const para = "";
      const paramsData = {type:para}
        getRoles(paramsData).then(res => {
                  this.optionsRoles = res.data;
              })
    },
    resList(){
        this.value2 = '';
        this.selectRoles = '';
        this.fetchData();
    },
    searchList(){//搜索
        if(this.value2){
            this.NEWDATASTAR = this.transformDate(this.value2[0]);
            this.NEWDATAEND = this.transformDate(this.value2[1]);
        }
        this.fetchData();
    },
    transformDate(d){
       const newData = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();   
       return newData
    },
     changeRole(data){
        if((this.selectRoles == undefined)||(this.selectRoles == null)){
             this.selectRoles = ""
        }
    },
    changeData(data){
       if((data == undefined)||(data == null)){
             this.NEWDATASTAR = '';
            this.NEWDATAEND = '';
        }
    }
  }
}
</script>
<style lang="scss">
 .filter-container{
   margin-bottom:20px;
 }
 .el-date-range-picker{
   margin-left:220px;
 }
 .inp_search{
   width:20%;
   margin-right:1%;
   margin-left:1%;        
 }
</style>
